@charset "UTF-8";
@include ns(dialog){
  position: fixed;z-index: 2019;box-shadow: 1px 1px 20px rgba(0, 0, 0, .3); border-radius: 5px; background: #fff; overflow: hidden;min-width: 300px;transition: all .3s;
  @include ns(dialog-close){
    display: block; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; z-index: 10; color: #666; font-size: 14px; line-height: 20px; text-align: center;
    &:hover{
      opacity: .8;
    }
    &:before{content: '\f00d';}
  }
  @include ns(dialog-header){overflow: hidden; font-size: 16px; padding-left: 15px; position: relative; border: 1px solid #e9eaec; color: #333; border-radius: 5px 5px 0 0;-webkit-user-select: none;height: 40px;line-height: 40px;}
  @include ns(dialog-content){overflow: hidden;overflow-y: auto;padding: 20px;box-sizing: border-box}
  @include ns(dialog-footer){text-align: center;padding: 10px 0}
  @include ns(dialog-auto-close){position: absolute; left: 10px; top: 45px;display: none }
  @include ns(dialog-alert){text-align: center;
    @include ns(dialog-text){display: inline-block;text-align: left;font-size: 16px;
      i{font-size: 30px;display: inline-block;vertical-align: middle;margin-right: 5px;}
    }
    // 其他的需要再定义样式
    @include ns(icon-1){
      &:before{color: green;content: '\f058'}
    }
    // success
    @include ns(icon-2){
      &:before{color: red;content: '\f05c'}
    }
    //failure
    @include ns(icon-3){
      &:before{color: orange;content: '\f06a'}
    }
    //warning
  }
}
@include ns(dialog-modal){position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 2018;background: rgba(55, 55, 55, .6); animation: dialog-modal .3s;transition: .3s}
@keyframes dialog-modal{
  0%{opacity: 0}
  100%{opacity: 1}
}
/*过渡动画*/
.zoom-enter-active{ animation: zoom-enter;}
.zoom-leave-active{ animation: zoom-leave;}
@keyframes zoom-enter{
  0%{opacity: 0;transform: scale(.5)}
  100%{opacity: 1;transform: scale(1)}
}
@keyframes zoom-leave{
  0%{opacity: 1;transform: scale(1)}
  100%{opacity: 0;transform: scale(.5)}
}
.flip-enter-active{animation: flip-enter both ease-in;backface-visibility: visible !important;}
.flip-leave-active{ animation: flip-leave;}
@keyframes flip-enter{
  0%{transform: perspective(400px) rotateX(60deg)}
  70%{transform: perspective(400px) rotateX(-15deg)}
  to{transform: perspective(400px)}
}
@keyframes flip-leave{
  0%{transform: perspective(400px)}
  30%{transform: perspective(400px) rotateX(-15deg)}
  to{transform: perspective(400px) rotateX(45deg)}
}
.door-enter-active{animation: door-enter both cubic-bezier(0.4, 0, 0, 1.5);}
.door-leave-active{animation: door-leave both;}
@keyframes door-enter{
  from{transform: scale3d(0, 1, 1);opacity: 0}
}
@keyframes door-leave{
  60%{transform: scale3d(.01, 1, 1);}
  to{transform: scale3d(0, 1, .1);opacity: 0}
}
.rotate-enter-active{
  animation: rotate-enter both;
  transform-origin: center;
}
.rotate-leave-active{
  animation: rotate-leave both;
  transform-origin: center;
}
@keyframes rotate-enter{
  from{transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);opacity: 0}
}
@keyframes rotate-leave{
  to{transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);opacity: 0}
}
.slideDown-enter-active{
  animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
.slideDown-leave-active{
  animation: slideDown-leave both;
}
@keyframes slideDown-enter{
  from{transform: translate3d(0, -100px, 0);opacity: 0}
}
@keyframes slideDown-leave{
  to{transform: translate3d(0, -100px, 0);opacity: 0}
}
.slideUp-enter-active{animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);}
.slideUp-leave-active{animation: slideUp-leave both;}
@keyframes slideUp-enter{
  from{transform: translate3d(0, 100px, 0);opacity: 0}
}
@keyframes slideUp-leave{
  to{transform: translate3d(0, 100px, 0);opacity: 0}
}
.slideLeft-enter-active{
  animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
.slideLeft-leave-active{
  animation: slideLeft-leave both;
}
@keyframes slideLeft-enter{
  from{transform: translate3d(-150px, 0, 0);opacity: 0}
}
@keyframes slideLeft-leave{
  to{transform: translate3d(-150px, 0, 0);opacity: 0}
}
.slideRight-enter-active{animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5) .3s;}
.slideRight-leave-active{animation: slideRight-leave both;}
@keyframes slideRight-enter{
  from{transform: translate3d(150px, 0, 0);opacity: 0}
}
@keyframes slideRight-leave{
  to{transform: translate3d(150px, 0, 0);opacity: 0}
}

.val-enter-active{
  animation: val-enter forwards ease-out .5s;
}
.val-leave-active{animation: val-leave forwards ease-out .5s;}
@keyframes val-enter{
  0% {
    opacity: 0;
    transform: translate3d(calc(-100vw - 50%), 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(100px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes val-leave{
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
   transform: translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 50%), 0, 0);
  }
}
.donna-enter-active{
  animation: donna-enter 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
.donna-leave-active{animation: donna-leave 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1);}
@keyframes donna-enter{
  0%{
    opacity: 0;
    transform: translate3d(-400px, 0, 0) scale3d(1.4, 0, 1);
  }
  100%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes donna-leave{
  0%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  20%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  100%{
    opacity: 0;
    transform: translate3d(-400px, 0, 0) scale3d(1.4, 0, 1);
  }
}
.ricky-enter-active{
  animation:ricky-enter 0.4s forwards cubic-bezier(0.7,0,0.3,1);
  transform-origin: -150% 50%;
}
.ricky-leave-active{animation:ricky-leave 0.4s forwards cubic-bezier(0.7,0,0.3,1);
  transform-origin: -150% 50%;}
@keyframes ricky-enter{
  0% {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -45deg);
  }
  100% {
    opacity: 1;
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes ricky-leave{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
   transform: rotate3d(0, 0, 1, 45deg);
  }
}
